<!DOCTYPE html>
<html lang="en">
<head>
    <title>冰墩墩</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        html,body{
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
<script type="module">
    import * as THREE from './js/three.module.js';

    import { OrbitControls } from './js/OrbitControls.js';
    import { GLTFLoader } from './js/GLTFLoader.js';

    let camera, scene, renderer;

    init();
    render();

    function init() {

        const container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
        camera.position.set( 0, 0, 3 );

        scene = new THREE.Scene();

        //待插入模型

        // 加载一张环境贴图
        // gltf-pipeline -i scene.gltf -o sceneDraco.gltf -d --separate
        const envmap = new THREE.TextureLoader().load( "model/env.jpg",function(texture){
            const loader = new GLTFLoader().setPath( 'model/' );
            loader.load( 'dwendwen.gltf', function ( gltf ) {
                //通过遍历场景，找到指定的模型对象
                gltf.scene.traverse( function ( child ) {
                    if(child.name=="outer"||child.name=="mask"){
                        //找到外壳模型对象添加环境贴图
                        child.material.envMap = texture;
                        child.material.envMap.mapping = THREE.EquirectangularReflectionMapping;
                        child.material.envMapIntensity=2;
                    }else if(child.name=="body"){
                        //找到身体模型对象，添加卡通渲染材质
                        var map = child.material.map;
                        child.material = new THREE.MeshToonMaterial({map:map});
                    }
                });

                scene.add( gltf.scene );
                render();
            } );
        });

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        const controls = new OrbitControls( camera, renderer.domElement );
        controls.addEventListener( 'change', render ); // use if there is no animation loop
        controls.minDistance = 2;
        controls.maxDistance = 10;
        controls.target.set( 0, 0, - 0.2 );
        controls.update();

        window.addEventListener( 'resize', onWindowResize );
    }

    function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
        const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
        const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
        const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
        // compute a unit vector that points in the direction the camera is now
        // in the xz plane from the center of the box
        const direction = (new THREE.Vector3())
            .subVectors(camera.position, boxCenter)
            .multiply(new THREE.Vector3(1, 0, 1))
            .normalize();

        // move the camera to a position distance units way from the center
        // in whatever direction the camera was from the center already
        camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));

        // pick some near and far values for the frustum that
        // will contain the box.
        camera.near = boxSize / 100;
        camera.far = boxSize * 100;

        camera.updateProjectionMatrix();

        // point the camera to look at the center of the box
        camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
        render();
    }

    function render() {
        renderer.render( scene, camera );
    }
</script>
</body>
</html>
